<template>
<button class="sporty-button" :class="classes" :disabled="disabled">
    <span v-if="loading" class="sporty-loadingIndicator"></span>
    <slot />
</button>
</template>

<script lang="ts">
import {
    computed
} from 'vue'
export default {
    //不继承父辈属性
    //inheritAttrs:false,
    props: {
        theme: {
            type: String,
            default: 'normal',
        },
        size: {
            type: String,
            default: 'normal',
        },
        level: {
            type: String,
            default: 'normal',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        loading: {
            type: Boolean,
            default: false
        }

    },
    setup(props) {
        //这组对象表示的是继承父类属性size和剩下的都封装到rest中，以便当属性多时输出累赘
        //context.attrs表示的是获取上下文的属性？
        // const {size, ...rest}=context.attrs;
        // return{size,rest};
        //定义好相关属性从props中获取（疑问赋值两边明面上不一一对应可？）
        const {
            theme,
            size,
            level,
        } = props;
        const classes = computed(() => {
            //根据标签属性赋值给classes再return便于选择性调用(计算属性的调用)
            return {
                [`sporty-theme-${theme}`]: theme,
                [`sporty-size-${size}`]: size,
                [`sporty-level-${level}`]: level
            }
        })
        return {
            classes
        };
    }
}
</script>

<style lang="scss" scoped>
$h: 32px;
$border-color: #d9d9d9;
$color: #8950fc;
$violet: #7337ee;
$red:red;
$grey:grey;
$darkgrey:#e8e8e8;
$radius: 4px;

.sporty-button {
    font-size: 18px;
    margin-right: 8px;
    box-sizing: border-box;
    height: $h;
    padding: 0 12px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    background: #eee5ff;
    color: $color;
    border: 1px solid $border-color;
    border-radius: $radius;
    box-shadow: 0 1px 0 fade-out(black, 0.95);

    &+& {
        margin-left: 8px;
    }

    &:hover,
    &:focus {
        color: $violet;
        border-color: $violet;
    }

    &:focus {
        outline: none;
    }

    &::-moz-focus-inner {
        border: 0;
    }

    &.sporty-theme-link {
        border-color: transparent;
        box-shadow: none;
        color: $violet;

        &:hover,
        &:focus {
            color: lighten($violet, 10%);
        }
    }

    &.sporty-theme-text {
        border-color: transparent;
        box-shadow: none;
        color: inherit;

        &:hover,
        &:focus {
            background: darken(white, 5%);
            ;
        }
    }

    &.sporty-size-big {
        font-size: 24px;
        height: 48px;
        padding: 0 16px;
    }

    &.sporty-size-small {
        font-size: 12px;
        height: 20px;
        padding: 0 4px;
    }

    &.sporty-level-main {
        font-weight: bold;
        color: white;
        background: $violet;

    }

    &.sporty-level-danger {
        background: $red;
        border-color: $red;
        color: white;

        &:hover,
        &:focus {
            background: darken($red, 10%);
            border-color: darken($red, 10%);
        }
    }

    &.sporty-theme-normal {
        &[disabled] {
            cursor: not-allowed;
            color: $grey;

            &:hover {
                border-color: $grey;
            }
        }
    }

    &.sporty-level-main,
    &.sporty-level-danger {
        &[disabled] {
            cursor: not-allowed;
            color: $grey;
            background: $darkgrey;
            border-color: rgb(217, 217, 217);

            &:hover {
                border-color: $grey;
            }
        }
    }

    &.sporty-theme-link,
    &.sporty-theme-text {
        &[disabled] {
            cursor: not-allowed;
            color: $grey;
        }
    }

    >.sporty-loadingIndicator {
        width: 14px;
        height: 14px;
        display: inline-block;
        margin-right: 4px;
        border-radius: 8px;
        border-color: $violet $violet $violet transparent;
        border-style: solid;
        border-width: 2px;
        animation: sporty-spin 1s infinite linear;
    }
}

@keyframes sporty-spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}
</style>
